<template>
  <view>
    <l-background />

    <view id="tab" class="sort-tab flex-row">
      <view v-for="(item,index) in sortTab" :key="index" class="flex-item sort-tab-item flex-row flex-center" @click="showDriverSort(index)">
        <text class="text-24" :class="['color-'+(index===tabInx?'primary':'t3')]">{{ item }}</text>
        <text class="tbb-sanjiaoxia margin-left-10 block" :class="[index===tabInx?'color-primary rotate':'color-t3']" />
      </view>
    </view>

    <view class="padding-30 tui-skeleton">
      <template v-if="list.length">
        <view>
          <view v-for="(item,index) in list" :key="index" class="margin-bottom-30 platform-driver-item">
            <driver-item :item="item" />
          </view>
        </view>
        <l-footer :has-more="hasMore" />
      </template>
      <template v-else>
        <tui-skeleton v-if="showSkeleton" :preload-data="preloadData" />
        <l-no-data v-else text="暂无符合条件的司机" type="data" />
      </template>
    </view>

    <driver-filter :show.sync="showSort" :tab="tabInx" :translatey="86" @close="tabInx=''" @choose="setForm" />
  </view>
</template>

<script>
import DriverItem from '../components/driver-item/driver-item'
import DriverFilter from '../components/driver-filter/driver-filter'
import { pagePlatformDriver, getAutoCompanyInfoAll } from '../api'
import { preloadData } from './index'
export default {
  name: 'PlatformDriver',
  components: {
    DriverItem,
    DriverFilter
  },
  data() {
    return {
      preloadData,
      sortTab: ['筛选', '地区'],
      tabInx: '',
      showSort: false,
      translatey: 0,
      list: [],
      showSkeleton: true,
      hasMore: true,
      form: {
        page: 1,
        size: 10,
        startTime: '',
        endTime: '',
        sort: '',
        scopeId: ''
      }
    }
  },
  onLoad(e) {
    this.form.startTime = e.startDate
    this.form.endTime = e.endDate
    this.init()
  },
  onPullDownRefresh() {
    this.reload()
  },
  onReachBottom() {
    this.nextPage()
  },
  methods: {
    async init() {
      await this.getAutoCompanyInfo()
      await this.getList()
    },
    // 展示筛选条件
    showDriverSort(inx) {
      if (this.tabInx === inx) {
        this.tabInx = ''
        this.showSort = false
        return
      }
      this.tabInx = inx
      this.showSort = true
    },
    // 修改筛选条件
    setForm(e) {
      Object.assign(this.form, e)
      this.form.page = 1
      this.getList()
    },
    // 获取全部公司信息
    async getAutoCompanyInfo() {
      const [err, res] = await getAutoCompanyInfoAll()
      if (!this.$http.errorCheck(err, res)) return false
      if (res.data.data) {
        this.form.scopeId = res.data.data.scopeid
      }
    },
    // 获取平台司机列表
    async getList() {
      const [err, res] = await pagePlatformDriver(this.form)
      this.showSkeleton = false
      uni.stopPullDownRefresh()
      if (!this.$http.errorCheck(err, res)) return false
      let data = res.data.data.records
      if (!data) data = []

      if (data.length < this.form.size) this.hasMore = false

      if (this.form.page === 1) this.list = data
      else this.list.push(...data)
    },
    reload() {
      this.hasMore = true
      this.form.page = 1
      this.getList()
    },
    nextPage() {
      if (this.hasMore) {
        this.form.page++
        this.getList()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.sort-tab{
  @include position(sticky,0);
  width:750rpx;
  background:#FFFFFF;
  border-bottom:2rpx solid $color-border;
  z-index:1000;
}
.sort-tab-item{
  height:84rpx;
}
.block{
  transform: rotate(180deg);
  transition: transform .3s linear;
}
.rotate{
  transform: rotate(0deg);
}
.platform-driver-item:last-child{
  margin:0;
}
</style>
